<template>
  <el-dialog
    :title="$t('msg.excel.title')"
    :model-value="modelValue"
    width="30%"
    @close="closed"
  >
    <el-input v-model="excelName" :placeholder="$t('msg.excel.placeholder')" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closed">{{ $t('msg.excel.close') }}</el-button>
        <el-button type="primary" :loading="loading" @click="onConfirm">
          {{ $t('msg.excel.confirm') }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import { defineProps, defineEmits, ref } from 'vue'
  import { getUserManageAllList } from '@/api/user-manage'
  import { watchSwitchLang } from '@/utils/i18n'
  import { useI18n } from 'vue-i18n'
  import { USER_RELATIONS } from './Export2ExcelConstants'
  import { dateFilter } from '@/filters'
  defineProps({
    modelValue: {
      type: Boolean,
      required: true,
    },
  })
  const i18n = useI18n()
  let exportDefaultName = i18n.t('msg.excel.defaultName')
  const excelName = ref('')
  excelName.value = exportDefaultName
  watchSwitchLang(() => {
    exportDefaultName = i18n.t('msg.excel.defaultName')
    excelName.value = exportDefaultName
  })

  const emits = defineEmits(['update:modelValue'])

  /**
   * 导出按钮点击事件
   */
  const loading = ref(false)
  const onConfirm = async () => {
    loading.value = true
    const allUser = (await getUserManageAllList()).list
    // 导入工具包
    const excel = await import('@/utils/Export2Excel')
    const data = formatJson(USER_RELATIONS, 0)
    excel.export_json_to_excel({
      // excel 表头
      header: Object.keys(USER_RELATIONS),
      // excel 数据（二维数组结构）
      data,
      // 文件名称
      filename: excelName.value || exportDefaultName,
      // 是否自动列宽
      autoWidth: true,
      // 文件类型
      bookType: 'xlsx',
    })
    closed()
  }

  // 该方法负责将数组转化成二维数组
  const formatJson = (headers, rows) => {
    // 首先遍历数组
    // [{ username: '张三'},{},{}]  => [[’张三'],[],[]]
    return rows.map((item) => {
      return Object.keys(headers).map((key) => {
        // 时间特殊处理
        if (headers[key] === 'openTime') {
          return dateFilter(item[headers[key]])
        }
        // 角色特殊处理
        if (headers[key] === 'role') {
          const roles = item[headers[key]]

          return JSON.stringify(roles.map((role) => role.title))
        }
        return item[headers[key]]
      })
    })
  }

  /**
   * 关闭
   */
  const closed = () => {
    loading.value = false
    emits('update:modelValue', false)
  }
</script>
